<template>
  <div class="lb">
    <div class="lbbox">
      <a href="#">
        <img
          src="http://www.jz5158.cn/move/static/images/bnner1/banner02.png"
          alt=""
        />
      </a>
      <a href="#">
        <img
          src="http://www.jz5158.cn/move/static/images/bnner1/banner01.png"
          alt=""
        />
      </a>
      <a href="#">
        <img
          src="http://www.jz5158.cn/move/static/images/bnner1/banner03.png"
          alt=""
        />
      </a>
    </div>
  </div>
</template>
<style lang="scss">
.lb {
  width: 41.4rem;
  height: 28.3rem;
  overflow: hidden;
  .lbbox {
    width: 124.2rem;
    height: 100%;
    margin-left: 0;
    animation: slb 9s infinite;
    img {
      float: left;
      width: 41.4rem;
      height: 100%;
    }
  }
  @keyframes slb {
    0% {
      margin-left: 0;
    }
    25% {
      margin-left: 0;
    }
    30% {
      margin-left: -41.4rem;
    }
    60.3% {
      margin-left: -41.4rem;
    }
    63% {
      margin-left: -82.8rem;
    }
    66% {
      margin-left: -82.8rem;
    }
    99.9% {
      margin-left: -82.8rem;
    }
    100% {
      margin-left: 0;
    }
  }
}
</style>
